<template>
  <json-editor-vue
    v-model="fakeValue"
    class="jsoneditor_viewer"
    current-mode="code"
    v-bind="$attrs"
    language="zh-CN"
    style="height: calc(100% - 10px)"
    @change="
      (v) => {
        $emit('change', v)
      }
    "
  />
</template>

<script>
import JsonEditorVue from 'json-editor-vue3'
import { ref, watch } from 'vue'
export default {
  name: 'JsonViewer',
  components: {
    JsonEditorVue
  },
  props: {
    modelValue: {
      type: Object,
      required: false
    }
  },
  emits: ['update:modelValue', 'change'],
  setup(props, context) {
    const fakeValue = ref(props.modelValue)
    watch(
      () => props.modelValue,
      (val, preVal) => {
        fakeValue.value = props.modelValue
      }
    )
    watch(
      () => fakeValue.value,
      (val, preVal) => {
        context.emit('update:modelValue', fakeValue.value)
      }
    )
    // 返回值
    return {
      fakeValue
    }
  }
}
</script>

<style lang="less" scoped>
.jsoneditor_viewer {
  :deep(.jsoneditor-menu) {
    display: none;
  }
  :deep(.jsoneditor-outer) {
    margin-top: 0px;
    padding-top: 0px;
  }
  :deep(.jsoneditor) {
    border: thin solid #f0f0f0;
  }
}
</style>
